<template>
  <div class="box-main">
    <!-- 这里可以放导航条 -->
    <div style="height: 11.28rem; font-size: 24px;">我是导航条</div>
    <img class="box-main-icon" src="@/assets/images/TaskCenter/icon2.png" alt="" />
    <div class="card">
      <div class="card-title">
        <p>我的活跃度</p>
        <p class="card-title-number">80</p>
      </div>
      <div class="card-imgs">
        <img v-for="v in 5" :key="v" class="card-imgs-img" :src="getImageUrl(v < 5 ? 'icon3.png' : 'icon4.png')"
          alt="" />
      </div>
      <div class="card-steps">
        <div class="card-steps-step"
          :class="{ 'card-steps-step-active': i <= active - 1, 'card-steps-step-active-color': i == active }"
          v-for="(v, i) in list" :key="v">
          <div class="card-steps-step-head">
            <div class="card-steps-step-head-line"></div>
            <div class="card-steps-step-head-main"></div>
          </div>
          <div class="card-steps-step-value">{{ v }}</div>
        </div>
      </div>
    </div>
    <div class="box-list">
      <div class="box-list-item" v-for="item in 3" :key="item">
        <div class="box-list-item-title">去家族房待30分钟</div>
        <div class="box-list-item-content">
          <div class="flex-center">
            <div class="box-list-item-content-progress" style="width: 33.08rem;">
              <p class="box-list-item-content-progress-bar"></p>
              <p class="box-list-item-content-progress-bar-inner" :style="{ width: `${width}%` }"></p>
            </div>
            <div class="box-list-item-content-rate">20/30</div>
          </div>
          <div class="box-list-item-content-btn">去完成</div>
        </div>
        <div class="box-list-item-gift-list">
          <div class="box-list-item-gift-list-item flex-center" v-for="v in gifuList" :key="v.img">
            <img class="box-list-item-gift-list-item-icon" :src="getImageUrl(v.img)" alt="" />
            <p class="box-list-item-gift-list-item-text">{{ v.text }}</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref } from 'vue'

const getImageUrl = (name) => {
  return new URL(`../../assets/images/TaskCenter/${name}`, import.meta.url).href
}

const list = [20, 40, 60, 80, 100]
const width = 59

const gifuList = [
  { text: '魔钻x200', img: 'icon5.png' },
  { text: '星贝x2000', img: 'icon6.png' },
  { text: '蓝星石x2000', img: 'icon7.png' },
]

const active = ref(0)

setInterval(() => {
  if (active.value >= 4) {
    active.value = 0
  } else {
    active.value++
  }
}, 1000)
</script>
<style lang="scss" scoped>
.box-main {
  background-image: url('@/assets/images/TaskCenter/icon1.png');
  background-size: 100% 80rem;
  background-repeat: no-repeat;
  padding: 12.05rem 4.1rem;

  &-icon {
    width: 36.92rem;
    height: 18.46rem;
    display: block;
    padding: 3.08rem 0 0 2.56rem;
  }

  .card {
    padding: 6.41rem 4.62rem 15.26rem 4.62rem;
    margin-top: 11.03rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2.56rem 2.56rem 2.56rem 2.56rem;
    border: 0.26rem solid;
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 0.26 0.26;

    &-title {
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 4.1rem;
      color: #333333;
      line-height: 5.64rem;

      &-number {
        font-size: 6.15rem;
        color: #FD8828;
        line-height: 8.72rem;
        margin-left: 1.79rem;
      }
    }

    &-imgs {
      display: flex;
      align-items: center;
      gap: 0 9.49rem;
      margin-top: 3.59rem;

      &-img {
        width: 8.72rem;
        height: 8.72rem;
        display: block;
      }
    }

    &-steps {
      display: flex;
      width: 100%;
      margin-top: 3.08rem;
      box-sizing: border-box;
      padding: 0 6rem 0 3rem;

      &-step {
        position: relative;
        flex-shrink: 1;
        flex-basis: 25%;
        margin-right: 0px;

        &-head {
          color: #303133;
          border-color: #303133;
          position: relative;
          width: 100%;

          &-line {
            height: 1.03rem;
            background: #F4F4F4;
            top: 0px;
            left: 0;
            right: 0;
            position: absolute;
            border-color: inherit;
          }

          &-main {
            width: 2.05rem;
            height: 2.05rem;
            background: #F4F4F4;
            border-radius: 50%;
            white-space: normal;
            text-align: left;
            position: absolute;
            top: -0.4rem;
            left: -0.2rem;
          }
        }

        &-value {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 3.08rem;
          color: #999999;
          line-height: 4.36rem;
          position: absolute;
          top: 3.08rem;
        }

        &:last-child {
          flex-basis: 0%;

          .card-steps-step-head-line {
            display: none;
          }
        }
      }

      &-step-active {
        .card-steps-step-head-line {
          background: #FF8126;
        }

        .card-steps-step-head-main {
          background: #FF8126;
        }
      }

      &-step-active-color {
        .card-steps-step-head-main {
          width: 3.08rem;
          height: 3.08rem;
          top: -1rem;
          background: #FF8126;
        }

        .card-steps-step-value {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 3.08rem;
          color: #333333;
          line-height: 4.36rem;
        }
      }
    }
  }
  .box-list {
    margin-top: 2.56rem;
    background: linear-gradient(180deg, rgba(255, 149, 35, 0.155) 0%, rgba(255, 255, 255, 0) 20% 100%), #FFFFFF;
    border-radius: 2.56rem;
    padding: 4.36rem 3.08rem;
  

    &-item {
      padding: 3.59rem 0;
      border-bottom: 0.13rem solid #eee;

      &:last-child {
        border-bottom: none;
      }

      &-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 3.59rem;
        color: #333333;
        line-height: 5.13rem;
      }

      &-content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-progress {
          width: 100%;
          position: relative;

          &-bar {
            width: 100%;
            height: 1.03rem;
            background: #F4F4F4;
            border-radius: 25.9rem;
            position: absolute;
            top: 0;
          }

          &-bar-inner {
            position: absolute;
            height: 1.03rem;
            background: #FF8126;
            border-radius: 25.9rem;
            top: 0;
          }
        }

        &-rate {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 2.56rem;
          color: #999999;
          margin-left: 2.56rem;
        }

        &-btn {
          padding: 1.03rem 2.56rem;
          background: linear-gradient(360deg, #FE7D2A 0%, #FFAC30 100%), linear-gradient(360deg, #F97F1E 0%, rgba(255, 122, 37, 0) 63%);
          box-shadow: inset 0rem 0rem 0.51rem 0rem #DC6606, 0rem 1.54rem 2.56rem 0rem rgba(193, 109, 6, 0.2);
          border-radius: 8.46rem 8.46rem 8.46rem 8.46rem;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 3.59rem;
          color: #FFFFFF;
          line-height: 5.13rem;
        }
      }

      &-gift-list {
        display: flex;
        margin-top: 2.05rem;

        &-item {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 2.56rem;
          color: #999999;
          line-height: 2.56rem;
          margin-right: 2.56rem;

          &-icon {
            width: 3.08rem;
            height: 3.08rem;
            display: block;
            margin-right: 1.03rem;
          }
        }
      }
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
  }
}
</style>